    <template>
  <div class="main">
    <div class="title">系 统 安 全 设 置</div>
    <div class="content">
      <div class="contentMain">
        <div class="each">
          <div class="leftContent">
            <input type="checkbox" />
            <span>进入设置需要密码</span>
          </div>
          <div class="rightContent">
            <!-- 输入密码 -->
            <input
              :type="passwordVisible ? 'text' : 'password'"
              v-model="password"
            />

            <!-- 显示/隐藏按钮 -->
            <button @click="togglePasswordVisibility">显 示 密 码</button>
          </div>
        </div>

        <div class="each">
          <div class="leftContent">
            <input type="checkbox" />
            <span>屏幕保护后需要密码</span>
          </div>
          <div class="rightContent">
            <!-- 输入密码 -->
            <input
              :type="passwordVisible ? 'text' : 'password'"
              v-model="password"
            />

            <!-- 显示/隐藏按钮 -->
            <button @click="togglePasswordVisibility">显 示 密 码</button>
          </div>
        </div>
        <div class="each">
          <div class="leftContent">
            <span>等待进入屏幕保护时间（分钟）</span>
          </div>
          <div class="rightContent">
            <input type="text" />
            <button>修 改 密 码</button>
          </div>
        </div>
      </div>
      <div class="buttons">
        <button @click="exit">退 出</button>
      </div>
    </div>
  </div>
</template>
    <script setup>
import { useRoute, useRouter } from "vue-router";
import { ref } from "vue";
const router = useRouter();
const exit = () => {
  router.push({ path: "/sheZhi", query: { data: "signin" } });
};
const password = ref("");
const passwordVisible = ref(false);

// 切换密码可见性的方法
function togglePasswordVisibility() {
  passwordVisible.value = !passwordVisible.value;
}
</script>
    <style scoped>
@import url("./general_settingJumpless/System_safety.less");
</style>